<template>
  <div class="note" @click="go">
    <div class="tittle" :style="{color:value.tittleColor,fontWeight:value.good?'600':'500'}">
      {{value.tittle}}
      <el-tag v-if="value.good" type="success" class="tags">精华帖</el-tag>
      <el-tag v-if="value.top" type="warning" class="tags">置顶帖</el-tag>
    </div>
    <div class="author">{{value.author.nickname}}</div>
  </div>
</template>

<script>
export default {
  props: ["value"],
  methods: {
    go() {
      this.$router.push("/article/" + this.value.noteId);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/screen.scss";
@import "@/assets/source.scss";
.note {
  margin: 10px 0;
  padding: 30px 20px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: $box-shadow-type1;
  transition: 0.2s;
  border-radius: 10px;
  @media (min-width: $media-screen-width) {
    padding: 30px 40px;
  }
}

.note:hover {
  transform: translateY(-2px);
  box-shadow: $box-shadow-type2;
}
.tittle {
  font-size: 33px;
  @media (min-width: $media-screen-width) {
    float: left;
  }
  .tags {
    margin: 0 5px;
  }
}
.author {
  @media (min-width: $media-screen-width) {
    float: right;
  }
  line-height: 33px;
}
</style>

